<template>
  <section>
    <el-card style="margin: 18px 2%;width: 95%">
      <el-table
        :data="ownList"
        stripe
        style="width: 100%"
        :max-height="tableHeight">
        <!--Form-->
        <el-table-column prop="orderId" label="订单号" sortable/>
        <el-table-column prop="customer.name" label="客户名"/>
        <el-table-column prop="customer.phone" label="联系方式" fit/>
        <el-table-column prop="descrip" label="问题描述" fit/>
        <el-table-column prop="reserveDate" label="预约时间" sortable width="150"/>
        <el-table-column prop="status" label="服务状态" fit>
          <template slot-scope="scope">
            <p v-if="scope.row.status===1" style="color:#0fff27">已录入</p>
            <p v-else-if="scope.row.status===2" style="color:#ff0700">已提交</p>
            <p v-else-if="scope.row.status===3" style="color:#0feeff">进行中</p>
            <p v-else-if="scope.row.status===4" style="color:#1755d7">维修结束</p>
            <p v-else-if="scope.row.status===5" style="color:#17ff0f">归还中</p>
            <p v-else-if="scope.row.status===6" style="color:#e6e6ea">完成订单</p>
          </template>
        </el-table-column>
        <el-table-column prop="category" label="所需服务" :formatter="categoryFormatter"/>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-tooltip content="查看详情" placement="bottom" effect="light">
              <el-button
                type="text"
                style="font-size: 16px"
                @click="viewOrder(scope.row)"
                icon="el-icon-s-promotion"/>
            </el-tooltip>
            <el-tooltip content="评价" placement="bottom" effect="light"
                        v-if="scope.row.isComment===1&&scope.row.status===6">
              <el-button
                :disabled="contentDis"
                type="text"
                style="font-size: 16px"
                @click="comment(scope.row)"
                icon="el-icon-chat-round"/>
            </el-tooltip>
            <el-tooltip content="查看评价" placement="bottom" effect="light" v-if="scope.row.isComment===0">
              <el-button
                :disabled="contentDis"
                type="text"
                style="font-size: 16px"
                @click="viewComment(scope.row)"
                icon="el-icon-message"/>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :page-size="size"
          :total="total"
          style="float:right;"/>
      </el-col>
    </el-card>
    <order-item ref="OrderItem"/>
    <order-comment ref="OrderComment" @reload="orderList"/>
  </section>
</template>

<script>
import OrderItem from "./component/OrderItem";
import OrderComment from "../comment/OrderComment";

export default {
  name: "CustomerOrder",
  components: {OrderComment, OrderItem},
  data() {
    return {
      ownList: [],
      size: 5,
      total: 0,
      page: 1,
      contentDis: false
    }
  },
  methods: {
    orderList() {
      this.$axios.post("/orders/customer_order", {
        page: this.page,
        size: this.size,
        id: this.$store.state.user.id
      }).then(resp => {
        if (resp.status === 200) {
          this.ownList = resp.data.result
          this.total = resp.data.result.total
        }
      })
    },
    categoryFormatter(row) {
      let categorylist = row.category
      let result = []
      for (let categorylistKey in categorylist) {
        result.push(categorylist[categorylistKey].name + " ")
      }
      return result
    },
    viewOrder(row) {
      if (row.status === 1 || row.status === 2) {
        this.$message({
          message: '订单未开始，请稍后查看',
          type: "warning"
        })
      } else {
        this.$refs.OrderItem.show(row)
      }
    },
    comment(order) {
      this.$refs.OrderComment.addComment(order)
    },
    viewComment(order) {
      this.$refs.OrderComment.viewComment(order)
    },
    handleCurrentChange(page) {
      this.page = page
      this.viewOrder()
    },
  },
  mounted() {
    this.orderList()
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 320
    }
  },
}
</script>

<style scoped>

</style>
